<template>
  <div class="addaddress">
    <div class="item">
      <input type="text" placeholder="姓名" v-model="userName">
    </div>
    <div class="item">
      <input type="text" placeholder="手机号码" v-model="telNumber">
    </div>
    <div class="item">
      <picker mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem">
        <input type="text" placeholder="城市、区县" v-model="address">
      </picker>
    </div>
    <div class="item">
      <input type="text" placeholder="详细地址，如楼道、楼盘号等" v-model="detailaddress">
    </div>

    <div class="item itemend">    	
  		<checkbox-group @change="defaultChange">
	        <label class="checkbox">
	          <checkbox class="box" value="true" :checked="checked" color="#b4282d"></checkbox>
	          	设为默认地址
	        </label>
  		</checkbox-group>
  		<div class="del" @click="del" v-if="delValue">     	
	   	 	删除地址
    	</div>
    </div>

    

    <div class="bottom" @click="saveAddress">保存</div>
  </div>
</template>

<script>
import {showSuccess, showModel,get,post} from '@/util'
export default {
  data () {
    return {
      userName: '',
      telNumber: '',
      region: [],
      customItem: '全部',
      address: '',
      detailaddress: '',
      checked: false,
      delValue:false,
      openId: '',
      res: '',
      id: ''
    }
  },
  onShow() {
	    const userinfo = wx.getStorageSync('userinfo')
		this.openId = userinfo.openId
	    if (this.$root.$mp.query.id) {
	      this.id = this.$root.$mp.query.id
	      this.delValue = true
	      this.getDetail()
	    }else{
	    	this.userName = ''
	      	this.telNumber = ''
	      	this.address = ''
	      	this.detailaddress = ''
	      	this.delValue = false
	    }
  	},
  	methods: {
  		//获取点击编辑进来的地址详细信息
   	 	async getDetail () {
    	  	const data = await get('/app/address/detailAction', {
        		id: this.id
      		})
	      	// console.log("地址编辑",data)
	      	let detail = data.detailDatas
	      	this.userName = detail.name
	      	this.telNumber = detail.mobile
	      	this.address = detail.address
	      	this.detailaddress = detail.address_detail
	      	this.checked = detail.is_default === 1 ? true : false
    	},

    	//默认地址取值
	    defaultChange (e) {
	      this.checked = e.mp.detail.value[0]
	    },

	    //绑定城市信息
	    bindRegionChange (e) {
	      	console.log(e)
	      	let value = e.mp.detail.value
	      	this.address = `${value[0]} ${value[1]} ${value[2]}`
	    },

	    //保存地址
	    async saveAddress () {
	    	if(this.userName || this.telNumber || this.address ||this.detailaddress !==''){
		    	const data = await post('/app/address/saveAction', {
			        userName: this.userName,
			        telNumber: this.telNumber,
			        address: this.address,
			        detailaddress: this.detailaddress,
			        checked: this.checked,
			        openId: this.openId,
			        addressId: this.id
		      	})
		      	// console.log("保存后的地址:",data)
		      	if (data) {
		        	wx.showToast({
		          		title: '添加成功',
		          		icon: 'success',
		          		duration: 2000,
		          		mask: true,
		          		success: (result) => {
		            		setTimeout(() => {
			              		wx.navigateBack({
			                		delta: 1
			              		})
			            	}, 2000)
		          		},         
		        	});         
		      	}
		    }else{
		    	showModel('保存失败', '请先填写正确地址信息~')
		    }	      	
	    },

	    //删除地址	  
	    del(){
	    	wx.showModal({
          		title: '删除地址',
          		content:'确定要将该地址删除？',
          		showCancel:true,
          		success: (res) => {
          			if(res.confirm){
          				this.deladress()
          			}
          			// if(res.cancle){}   			
		        }    
	        }); 
	    },
	    async deladress (){
	        const data = await post('/app/address/delAdress',{
	   			openId:this.openId,
	   			addressId:this.id
   			})
	   		console.log("地址删除:",data)
	   		if(data){
	   			wx.showToast({
	          		title: '地址删除成功',
	          		icon: 'success',
	          		duration: 2000,
	          		mask: true,
	          		success: (result) => {
	            		setTimeout(() => {
		              		wx.navigateBack({
		                		delta: 1
		              		})
		            	}, 2000)
	          		},         
	        	}); 
	   		}  			   		
		}
	    
	}
}
</script>

<style lang="scss" scoped>
@import "./address.scss";
</style>